<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue'
import { useIndexStore } from '../../pinia';
import { ElMessage } from "element-plus"
import { request } from '@/utils/axios/request.js'
import local from '@/components/local.vue'

let locabob = ref(false)

const store = useIndexStore()
// 密码框的小眼睛
let showPassword = ref(false)
const passchan = () => {
    showPassword.value = !showPassword.value
}
// 定义下拉框绑定的值
let value = ref('')
// 定义姓名绑定框
let input = ref('')
let option1 = reactive([
    {
        value: '普通员工',
        label: '普通员工',
    },
    {
        value: '普通管理员',
        label: '普通管理员',
    },
    {
        value: '超级管理员',
        label: '超级管理员',
    },
])
let option4 = reactive([
    {
        value: '普通员工',
        label: '普通员工',
    },
    {
        value: '普通管理员',
        label: '普通管理员',
    },
])
let option2 = reactive([
    {
        value: '正常',
        label: '正常',
    },
    {
        value: '停用',
        label: '停用',
    },
])
let option3 = reactive([
    {
        value: '男',
        label: '男',
    },
    {
        value: '女',
        label: '女',
    },
])
// 复制user
let user = ref([]);
let findAll = async () => {
    try {
        locabob.value = true
        let resData = await request({
            url: '/admin/user/usersAll',
            method: 'get',
        })
        resData.data.forEach(item => {
            item.role = item.role == 0 ? '超级管理员' : item.role == 1 ? '普通管理员' : '普通员工'
            item.status = item.status == 1 ? '正常' : '停用'
        })
        user.value = resData.data.sort((a, b) => b.id - a.id)
    } catch (err) {
        console.log(err);
    }
    locabob.value = false
}
//请求数据
findAll()

//岗位
let options = reactive([
    {
        value: '项目经理',
        label: '项目经理'
    },
    {
        value: '前端工程师',
        label: '前端工程师'
    },
    {
        value: '后端工程师',
        label: '后端工程师'
    },
    {
        value: '人事经理',
        label: '人事经理'
    },
    {
        value: 'HR',
        label: 'HR'
    },
    {
        value: '培训专员',
        label: '培训专员'
    }
])
// 部门
let options1 = reactive([
    {
        value: '技术部',
        label: '技术部'
    },
    {
        value: '人事部',
        label: '人事部'
    }
])



// 定义一个空对象
let newTableDate = reactive({
    "username": "",
    "password": "",
    "nickname": "",
    "sex": '',
    "role": "",
    "department": "",
    "position": "",
    "phone_number": "",
    "emil": '',
    "status": "",
    "created_at": "",
})

// 定义起始页
let currentPage = ref(1);
// 定义每页多少条数据
let pageSize = ref(10);
// 计算每页渲染数据
let userDate = computed(() => {
    let statIndex = (currentPage.value - 1) * pageSize.value
    let endIndex = currentPage.value * pageSize.value;
    return user.value.slice(statIndex, endIndex);
})

// 重置
let closed = () => {
    if (Recycletext.value == "关闭") {
        Recycleall();
        input.value = ''
        value.value = ''
        return;
    }
    input.value = ''
    value.value = ''
    findAll()
}

// 查询数据
const searchA = async () => {
    if (Recycletext.value == "关闭") {
        try {
            locabob.value = true
            let character = value.value == '超级管理员' ? 0 : value.value == '普通管理员' ? 1 : value.value == '普通员工' ? 2 : ''
            let newcurrent = await request({
                url: `/admin/user/Recycles?username=${input.value}&role=${character}`,
                method: 'get'
            })
            newcurrent.data.forEach(item => {
            item.role = item.role == 0 ? '超级管理员' : item.role == 1 ? '普通管理员' : '普通员工'
            item.status = item.status == 1 ? '正常' : '停用'
        })
            // 显示成功信息
            ElMessage.success("查询成功")
            newRecycledata.value = newcurrent.data
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
        return;
    }
    try {
        locabob.value = true
        let character = value.value == '超级管理员' ? 0 : value.value == '普通管理员' ? 1 : value.value == '普通员工' ? 2 : ''
        let newdata = await request({
            url: `/admin/user/users?username=${input.value}&role=${character}`,
            method: 'get'
        })
        newdata.data.forEach(item => {
            item.role = item.role == 0 ? '超级管理员' : item.role == 1 ? '普通管理员' : '普通员工'
            item.status = item.status == 1 ? '正常' : '停用'
        })
        user.value = newdata.data
        // 显示成功信息
        ElMessage.success("查询成功")
    } catch (err) {
        console.log(err);
    }
    locabob.value = false
}


// 开启新增
let sheZhiCai = () => {
    caiDanS.value = true;
    title.value = '新增';
    newTableDate.created_at = new Date().toLocaleString()
}


// 删除每条数据
let lastid = ref('')
let current = ref({
    "username": "",
    "password": "",
    "nickname": "",
    "sex": '',
    "role": "",
    "department": "",
    "position": "",
    "phone_number": "",
    "emil": '',
    "status": "",
    "created_at": "",
})
const deleteRow = (id) => {
    lastid.value = id
    user.value.forEach((item, index) => {
        if (item.id == id) {
            current.value.username = item.username
            current.value.password = item.password
            current.value.nickname = item.nickname
            current.value.sex = item.sex
            current.value.role = item.role
            current.value.department = item.department
            current.value.position = item.position
            current.value.phone_number = item.phone_number
            current.value.emil = item.emil
            current.value.status = item.status
            current.value.created_at = item.created_at
        }
    })
}
let confirmEvent = async () => {
    try {
        locabob.value = true
        let data = await request({
            url: '/admin/user/users',
            method: 'delete',
            data: { id: lastid.value }
        })
        findAll()
        ElMessage.success(data.message)
    } catch (err) {
        console.log(err);
    }
    current.value.role = current.value.role == '超级管理员' ? 0 : current.value.role == '普通管理员' ? 1 : current.value.role == '普通员工' ? 2 : ''
    current.value.status = current.value.status == '正常' ? 1 : 0;
    try {
        let Recycledata = await request({
            url: '/admin/user/Recycleadd',
            method: 'post',
            data: current.value
        })
        Recycleall()
    } catch (error) {
        console.log(error);
    }
    locabob.value = false
}
let cancelEvent = () => {
    console.log("cancelEvent!");
}
// 定义新增管理员显示隐藏
let isShowU = ref(true)
// 
let title = ref('新增')

// 修改数据
let newId = ref();
const updateRow = (id) => {
    sheZhiCai();
    let obj = user.value.find(item => item.id == id);
    newTableDate = reactive(JSON.parse(JSON.stringify(obj)));
    newId.value = id;
    title.value = '修改';
}
// 关闭新增
let caiDanS = ref(false)
let delCai = () => {
    caiDanS.value = false
    newTableDate = reactive({
        "username": "",
        "password": "",
        "nickname": "",
        "sex": '',
        "role": "",
        "department": "",
        "position": "",
        "phone_number": "",
        "emil": '',
        "status": "",
        "created_at": "",
    })


}

// 保存
const save = async () => {
    if (title.value == '修改') {
        newTableDate.role = newTableDate.role == '超级管理员' ? 0 : newTableDate.role == '普通管理员' ? 1 : newTableDate.role == '普通员工' ? 2 : ''
        newTableDate.status = newTableDate.status == '正常' ? 1 : 0;
        try {
            locabob.value = true
            let data = await request({
                url: '/admin/user/users',
                method: 'put',
                data: {
                    newTableDate,
                    id: newId.value
                }
            })
            findAll()
            ElMessage.success(data.message)
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
    } else {
        if (newTableDate.username == '' || newTableDate.nickname == '' || newTableDate.role == '' || newTableDate.department == '' || newTableDate.position == '' || newTableDate.phone_number == '' || newTableDate.status == '' || newTableDate.password == '' || newTableDate.emil == '' || newTableDate.sex == '') {
            ElMessage.error('信息不能为空')
            return;
        }
        if (!/^[\w]{6,14}$/.test(newTableDate.password)) {
            ElMessage.error('密码最少6位，最大14位，由字母和数字组成')
            newTableDate.password = ''
            return;
        }
        if (!/^(0\d{2,3}-\d{7,8}(-\d{3,4})?|1[3456789]\d{9})$/.test(newTableDate.phone_number)) {
            ElMessage.error('号码格式错误')
            newTableDate.phone_number = ''
            return;
        }
        if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(newTableDate.emil)) {
            ElMessage.error('邮箱格式错误')
            newTableDate.emil = ''
            return;
        }

        newTableDate.role = newTableDate.role == '超级管理员' ? 0 : newTableDate.role == '普通管理员' ? 1 : newTableDate.role == '普通员工' ? 2 : ''
        newTableDate.status = newTableDate.status == '正常' ? 1 : 0;
        try {
            locabob.value = true
            let data = await request({
                url: '/admin/user/users',
                method: 'post',
                data: newTableDate
            })
            ElMessage.success(data.message)
            findAll()
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
    }
    delCai()
}

// 文件导出
import * as XLSX from 'xlsx'
const fileOut = () => {
    if (confirm('确认导出吗')) {
        const data = user.value; // json数据
        const sheetName = 'user'; // 表格名称
        const sheetHeader = ["username", "password", "nickname", "url", "sex", "role", "department", "position", "phone_number", "emil", "status", "created_at"]; // 表头
        const sheetData = data.map(item => [item.username, item.password, item.nickname, item.url, item.sex, item.role, item.department, item.position, item.phone_number, item.emil, item.status, item.created_at]); // 表格数据
        sheetData.unshift(sheetHeader); // 将表头插入表格数据第一行
        const worksheet = XLSX.utils.aoa_to_sheet(sheetData); // 将表格数据转换为worksheet
        const workbook = XLSX.utils.book_new(); // 创建workbook
        XLSX.utils.book_append_sheet(workbook, worksheet, sheetName); // 将worksheet插入workbook
        XLSX.writeFile(workbook, 'user.xlsx'); // 下载表格
    }
}

// 文件导入
const fileOver = (event) => {
    const file = event.target.files[0]; // 获取上传的文件
    const reader = new FileReader(); // 创建FileReader对象
    reader.onload = async (e) => {
        const data = e.target.result; // 获取文件内容
        const workbook = XLSX.read(data, { type: 'binary' }); // 将文件内容转换为workbook
        const worksheet = workbook.Sheets[workbook.SheetNames[0]]; // 获取第一个worksheet
        const sheetData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); // 将worksheet转换为json数据
        const header = sheetData[0]; // 获取表头
        const jsonData = sheetData.slice(1).map(row => {
            const obj = {};
            header.forEach((h, i) => {
                obj[h] = row[i];
            });
            return obj;
        }); // 将表格数据转换为json数据
        jsonData.forEach(item => {
            item.role = item.role == '超级管理员' ? 0 : item.role == '普通管理员' ? 1 : item.role == '普通员工' ? 2 : ''
            item.status = item.status == '正常' ? 1 : 0;
        })

        try {
            locabob.value = true
            let data = await request({
                url: '/admin/user/users1',
                method: 'post',
                data: jsonData
            })
            findAll()
            ElMessage.success(data.message)
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
    };
    reader.readAsBinaryString(file); // 读取文件内容
}
//=======================================回收站===========================================
//确认密码弹窗
let dialogFormVisible = ref(false)
let form = reactive({
    password1: '',
    password2: '',
})
let newRecycledata = ref([])
//封装查询所有数据
let Recycleall = async () => {
    try {
        let Recycledata = await request({
            url: "/admin/user/RecycleAll",
            method: 'get'
        })
        Recycledata.data.forEach(item => {
            item.role = item.role == 0 ? '超级管理员' : item.role == 1 ? '普通管理员' : '普通员工'
            item.status = item.status == 1 ? '正常' : '停用'
        })
        newRecycledata.value = Recycledata.data.sort((a, b) => b.id - a.id)
    } catch (err) {
        console.log(err);
    }
}
let boxShow = ref(true)
let Recycletext = ref("回收站")
//回收按钮
let Recycle = () => {
    if (Recycletext.value == "回收站") {
        boxShow.value = false
        Recycleall()
        Recycletext.value = "关闭"
    } else if (Recycletext.value == "关闭") {
        boxShow.value = true
        Recycletext.value = "回收站"
        input.value = ''
        value.value = ''
    }
}
//回收站删除按钮
let Recycleid = ref('')
let remove = (id) => {
    dialogFormVisible.value = true
    Recycleid.value = id
}

//确认密码删除
let passave = async () => {
    let userItems = ref('')
    let usernameLoca = localStorage.getItem('username')
    if (usernameLoca) {
        try {
            let newdata = await request({
                url: `/admin/user/users1?username=${usernameLoca}`,
                method: 'get'
            })
            userItems.value = newdata.data[0]
        } catch (err) {
            console.log(err);
        }
    }
    if (form.password1 != userItems.value.password) {
        ElMessage.error('原始密码错误')
        form.password1 = ''
        form.password2 = ''
        return;
    } else if (form.password2 != userItems.value.password) {
        ElMessage.error('确认密码错误')
        form.password2 = ''
        return;
    } else if (form.password2 == userItems.value.password || userItems.value.password == form.password1) {
        try {
            locabob.value = true
            let data = await request({
                url: '/admin/user/Recycledel',
                method: 'delete',
                data: { id: Recycleid.value }
            })
            Recycleall()
            ElMessage.success(data.message)
            dialogFormVisible.value = false
            form.password1 = ''
            form.password2 = ''

        } catch (err) {
            console.log(err);
        }
        locabob.value = false
    }
}

//恢复按钮
let recover = (id) => {
    Recycleid.value = id
    newRecycledata.value.forEach((item, index) => {
        if (item.id == id) {
            current.value.username = item.username
            current.value.password = item.password
            current.value.nickname = item.nickname
            current.value.sex = item.sex
            current.value.role = item.role
            current.value.department = item.department
            current.value.position = item.position
            current.value.phone_number = item.phone_number
            current.value.emil = item.emil
            current.value.status = item.status
            current.value.created_at = item.created_at
        }
    })
}
//恢复确认弹窗
let confirmrecover = async () => {
    try {
        locabob.value = true
        let data = await request({
            url: '/admin/user/Recycledels',
            method: 'delete',
            data: { id: Recycleid.value }
        })

        Recycleall()
        ElMessage.success(data.message)
    } catch (err) {
        console.log(err);
    }
    current.value.role = current.value.role == '超级管理员' ? 0 : current.value.role == '普通管理员' ? 1 : current.value.role == '普通员工' ? 2 : ''
    current.value.status = current.value.status == '正常' ? 1 : 0;
    try {
        let Recycledata = await request({
            url: '/admin/user/users',
            method: 'post',
            data: current.value
        })
        findAll()
    } catch (error) {
        console.log(error);
    }
    locabob.value = false
}
</script>

<template>
    <div class="box_boxz">
        <local v-show="locabob" />
        <div class="container">
            <ul class="SystemLog">
                <li><span>账号:&nbsp;</span></li>
                <li><el-input v-model="input" placeholder="请输入账号" /></li>
                <li><span>角色:&nbsp;</span></li>
                <li>
                    <el-select v-model="value" class="m-2" placeholder="请选择角色">
                        <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </li>
                <li><el-button type="primary" @click="searchA">搜索</el-button></li>
                <li><el-button @click="closed">重置</el-button></li>
                <li><el-button type="primary" @click="sheZhiCai" v-show="isShowU">新增用户</el-button></li>
                <li><el-button type="success" @click="fileOut">文件导出</el-button></li>
                <li  v-show="store.role == 1 || store.role == 0">
                    <label for="files">
                        <p class="daoRu">文件导入</p>
                    </label>
                    <input type="file" style="display: none;" id="files" @change="fileOver">
                </li>
                <li style="margin-left: 10px;"><el-button type="primary" @click="Recycle" v-show="store.role == 0">{{
                    Recycletext }}</el-button></li>
            </ul>
            <div class="type_ul" v-show="boxShow">
                <el-table ref="multipleTableRef" :data="userDate">
                    <el-table-column fixed prop="nickname" label="姓名" />
                    <el-table-column property="username" label="账号" />
                    <el-table-column property="role" label="角色" />
                    <el-table-column property="department" label="部门" />
                    <el-table-column property="position" label="岗位" show-overflow-tooltip />
                    <el-table-column property="phone_number" label="手机号码" />
                    <el-table-column property="status" label="状态" />
                    <el-table-column property="created_at" label="创建时间" show-overflow-tooltip />
                    <el-table-column fixed="right" label="操作">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click.prevent="updateRow(scope.row.id)"
                                v-show="store.role == 1 || store.role == 0">
                                修改
                            </el-button>
                            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="#626AEF"
                                title="确定删除吗?" @confirm="confirmEvent" @cancel="cancelEvent">
                                <template #reference>
                                    <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row.id)"
                                        v-show="store.role == 0">
                                        删除
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 回收站表 -->
            <div class="type_ul" v-show="!boxShow">
                <el-table ref="multipleTableRef" :data="newRecycledata">
                    <el-table-column fixed prop="nickname" label="姓名" />
                    <el-table-column property="username" label="账号" />
                    <el-table-column property="role" label="角色" />
                    <el-table-column property="department" label="部门" />
                    <el-table-column property="position" label="岗位" show-overflow-tooltip />
                    <el-table-column property="phone_number" label="手机号码" />
                    <el-table-column property="status" label="状态" />
                    <el-table-column property="created_at" label="创建时间" show-overflow-tooltip />
                    <el-table-column fixed="right" label="操作">
                        <template #default="scope">
                            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="#626AEF"
                                title="确定恢复吗?" @confirm="confirmrecover" @cancel="cancelEvent">
                                <template #reference>
                                    <el-button link type="primary" size="small" @click.prevent="recover(scope.row.id)">
                                        恢复
                                    </el-button>
                                </template>
                            </el-popconfirm>
                            <el-button link type="primary" size="small" @click.prevent="remove(scope.row.id)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="demo-pagination-block" v-show="boxShow">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="user.length" />
            </div>
            <!-- 回收站分页 -->
            <div class="demo-pagination-block" v-show="!boxShow">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
                    :total="newRecycledata.length" />
            </div>
        </div>
        <div class="sheZhi" :style="{ width: caiDanS ? '460px' : '0' }">
            <dl>
                <dt>
                <dd>{{ title }}</dd>
                <dd @click="delCai"><span class="iconfont icon-shanchu2"></span></dd>
                </dt>
            </dl>
            <ul>
                <li>
                    <span>姓名:&nbsp;</span>
                    <el-input v-model="newTableDate.nickname" type="text" placeholder="请输入姓名" />
                </li>
                <li>
                    <span>账号:&nbsp;</span>
                    <el-input v-model="newTableDate.username" placeholder="请输入账号" clearable />
                </li>
                <li>
                    <span>密码:&nbsp;</span>
                    <el-input type="password" v-model="newTableDate.password" placeholder="请输入密码" :show-password="true">
                        <i class="el-icon-view el-input__icon" slot="suffix" @click="passchan"></i>
                    </el-input>
                </li>
                <li>
                    <span>性别:&nbsp;</span>
                    <el-select v-model="newTableDate.sex" placeholder="请选择性别">
                        <el-option v-for="item in option3" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </li>
                <li v-show="title != '修改'">
                    <span>角色:&nbsp;</span>
                    <el-select v-model="newTableDate.role" placeholder="请选择角色">
                        <el-option v-for="item in option4" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </li>
                <li>
                    <span>部门:&nbsp;</span>
                    <el-select v-model="newTableDate.department" placeholder="请选择部门">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </li>
                <li>
                    <span>岗位:&nbsp;</span>
                    <el-select v-model="newTableDate.position" placeholder="请选择岗位">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </li>
                <li>
                    <span>手机号码:&nbsp;</span>
                    <el-input v-model="newTableDate.phone_number" placeholder="请输入您的手机号码" />
                </li>
                <li>
                    <span>邮箱:&nbsp;</span>
                    <el-input v-model="newTableDate.emil" placeholder="请输入邮箱" clearable />
                </li>
                <li>
                    <span>状态:&nbsp;</span>
                    <el-select v-model="newTableDate.status" placeholder="请选择状态">
                        <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </li>
                <li>
                    <span>创建时间:&nbsp;</span>
                    <el-input v-model="newTableDate.created_at" disabled placeholder="请输入审批备注" />
                </li>
                <li>
                    <el-button type="primary" @click="save">保存</el-button>
                    <el-button @click="delCai">取消</el-button>
                </li>
            </ul>
        </div>
        <div class="mengBan" v-show="caiDanS" @click="delCai"></div>
        <div class="popbox">
            <el-dialog v-model="dialogFormVisible" title="确认密码">
                <el-form :model="form">
                    <el-form-item label="原始密码" label-width="140px">
                        <el-input v-model="form.password1" type="password" autocomplete="off" :show-password="true" />
                        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword = !showPassword"></i>
                    </el-form-item>
                    <el-form-item label="确认密码" label-width="140px">
                        <el-input v-model="form.password2" type="password" autocomplete="off" :show-password="true" />
                        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword = !showPassword"></i>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="passave">
                            确认删除
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<style scoped lang="less">
.daoRu {
    width: 80px;
    height: 32px;
    color: white;
    border-radius: 5px;
    background-color: #7ec050;
    text-align: center;
    line-height: 32px;
    font-weight: 400;
}

.box_boxz {
    display: flex;
    flex-direction: column;
    height: calc(100% - 85px);


    .container {
        display: flex;
        flex-direction: column;
        height: 100%;

        .SystemLog {
            margin-top: 10px;
            display: flex;
            flex-shrink: 0;
            height: 50px;
            line-height: 50px;
            background-color: #f9f9f9;
            font-size: 14px;
            padding-left: 20px;

            li {
                font-size: 14px;
                font-weight: 700;
                display: flex;
                align-items: center;
                margin-left: 10px;

                &:nth-child(3) {
                    margin-left: 20px;
                }
            }
        }

        .export {
            margin-left: 17%;
        }

        .systemLogNav {
            display: flex;
        }

        .type_ul {
            padding: 0 20px;
        }

        .demo-pagination-block {
            padding-bottom: 40px;
            overflow: hidden;
            align-self: center;
        }

        &:nth-child(8) {
            color: #44a5ff;
        }

    }

    // 设置
    .sheZhi {
        width: 0px;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        background-color: white;
        z-index: 1001;
        box-shadow: -1px 0 10px rgb(143, 143, 143);
        transition: all 0.3s ease-in-out;

        dl {
            display: flex;
            flex-direction: column;

            dt:nth-child(1) {
                width: 100%;
                padding: 16px 24px;
                display: flex;
                justify-content: space-between;
                border-bottom: 0.5px solid rgba(216, 214, 214, 0.5);
                margin-bottom: 45px;


                dd:nth-child(1) {
                    font-size: 20px;
                }

                dd:nth-child(2) {
                    margin-right: 60px;

                }
            }

        }

        ul {
            display: flex;
            align-items: center;
            flex-direction: column;
            padding: 0 30px;

            .demo-pagination-block {
                padding-bottom: 40px;
                overflow: hidden;
                align-self: center;
            }

            li {
                width: 100%;
                margin-bottom: 20px;
                display: flex;

                span {
                    flex-shrink: 0;
                    margin-right: 20px;
                    font-weight: 600;
                    font-size: 14px;
                    flex-direction: column;

                }
            }

        }


    }

    // 蒙版
    .mengBan {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background-color: rgba(247, 247, 247, 0.3);
        filter: brightness(1%);
    }

    .active {
        background-color: #1890FF;

        span {
            color: white;
        }

        a {
            color: white !important;
        }
    }

    .active1 {
        span {
            color: white;
        }

        .icon-jiantouxia {
            transform: rotateX(180deg);
            transition: all 0.1s linear;
        }
    }
}

.popbox {

    :deep .el-input {
        width: 300px;
    }

    .dialog-footer button:first-child {
        margin-right: 10px;
    }

    :deep .el-form {
        margin-left: 50px;
    }
}
</style>
